<template>

    <el-table :data="members" style="width: 80%;margin: auto;border: 1px solid;" v-loading="loading">
        <el-table-column
                label=""
                width="100"
        >
            <template slot-scope="scope">
                <avatar
                        :username="scope.row.username"
                        :inline="true"
                        :size="24"
                        color="#FFF"
                        class="user-avatar"
                        :src="scope.row.avatar"
                ></avatar>
            </template>
        </el-table-column>
        <el-table-column
                prop="username"
                label="账号">
        </el-table-column>
        <el-table-column
                prop="nickname"
                label="昵称">
        </el-table-column>
        <el-table-column
                label="操作">
            <template slot-scope="scope">
                <el-select
                        v-model="scope.row.auth"
                        @change="updateMember(scope.row)"
                        size="mini"
                >
                    <el-option
                            label="正常"
                            :value="0"
                    ></el-option>
                    <el-option
                            label="封禁"
                            :value="1"
                    ></el-option>
                </el-select>
            </template>
        </el-table-column>
        <el-table-column
                label="加入时间">
            <template slot-scope="scope">
                {{ formatDate(scope.row.gmtCreate) }}
            </template>
        </el-table-column>
    </el-table>
</template>


<script>
import api from "@/common/api";
import Avatar from "vue-avatar";
import XEUtils from "xe-utils";

export default {
    name: 'ContestMember',
    components: {
        Avatar
    },
    data() {
        return {
            contestID: '',
            total: 0,
            members: [],
            loading: false
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.contestID = this.$route.params.contestID;
            this.loading = true;
            api.getContestMember(this.contestID).then(
                (res) => {
                    this.members = res.data.data;
                    this.loading = false;
                },
                (err) => {
                    this.loading = false;
                }
            );
        },
        formatDate(param) {
            return XEUtils.toDateString(param, "yyyy/MM/dd HH:mm:ss");
        },
        updateMember(member) {
            api.updateContestMember(this.contestID, member.username, member.auth).then(
                (res) => {
                    if (res.data.status === 200) {
                        this.$message({
                            message: '更新成功',
                            type: 'success'
                        });
                        this.init();
                    } else {
                        this.$message({
                            message: '更新失败',
                            type: 'error'
                        });
                        this.init();
                    }
                },
                (err) => {
                    this.$message
                }
            );
        }
    }
}
</script>

<style scoped>

</style>
